<template>
    <div class="root">
        <!--第一行  头部 -->
        <el-row>
            <el-col :span="24" :class="['header']">
                <h2>后台管理系统</h2>
                <div>
                    <span>欢迎你，{{username}}</span>
                    <el-button type="primary" @click="logout">退出</el-button>
                </div>
            </el-col>
        </el-row>

        <!--第二行 -->
        <el-row :style="{height:'88%'}">
            <!--第一列 左侧导航 -->
            <el-col :span="4" :class="['left']">


                <el-menu class="el-menu-vertical-demo" text-color="" :class="['leftmenu']" default-active="2"
                    background-color="" active-text-color="rgb(102, 177, 255)">


                    <!--订单管理-->
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-s-grid"></i>
                            <span>订单管理</span>
                        </template>

                        <router-link to="/order">
                            <el-menu-item index="3-1">
                                订单列表
                            </el-menu-item>
                        </router-link>
                    </el-submenu>


                    <!--商品管理-->

                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-s-data"></i>
                            <span>商品管理</span>
                        </template>
                        <router-link to="/goods">
                            <el-menu-item index="2-1">
                                商品列表
                            </el-menu-item>
                        </router-link>
                        <router-link to="/category">
                            <el-menu-item index="2-2">
                                分类列表
                            </el-menu-item>
                        </router-link>
                    </el-submenu>

                    <!--系统管理-->
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>系统管理</span>
                        </template>
                        <router-link to="/user">
                            <el-menu-item index="1-1">
                                用户管理
                            </el-menu-item>
                        </router-link>
                    </el-submenu>

                </el-menu>

            </el-col>
            <!--第二列 工作区-->
            <el-col :span="20" class="workspace">
                <!--嵌套路由-->
                <router-view></router-view>
            </el-col>
        </el-row>
    </div>
</template>

<script>

export default {

    computed: {
        username() {
            return localStorage.getItem("loginuser")
        }
    },
    methods: {
        logout() {
            //退出
            localStorage.removeItem("loginuser");
            //跳转登录页面
            this.$router.push("/")
        }
    }
}
</script>
<!-- scoped="scoped"  标识 了 这里定义的样式 只适用于当前组件 -->
<style scoped="scoped">
.root {
    height: 100%;
}

.header {
    height: 70px;
    padding: 0px 20px;
    border: 2px solid rgb(231, 233, 236);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header span {
    flex-shrink: 0;
    line-height: 80px;
    padding: 0 20px;
}


.left {
    /* background-color: rgb(84, 92, 100); */
    height: 100%;
    margin-top: 5px;
    padding-top: 5px;
    border-right: 2px solid rgb(237, 238, 240);
    overflow: hidden;
}

a {
    text-decoration: none;
}

.leftmenu {
    text-align: left;
    border-right: 1px white solid;
}

.workspace {
    height: 100%;
    border: #fff solid 15px;
}
</style>